<template>
	<s-layout :title="getLangValue('工作台')" tabbar="/pages/index/index" :navbar-left-icon="false">
		<view class="index-wrap">
			<view class="card">
				<view class="title">{{getLangValue('人才分类')}}</view>
				<view class="grid">
					<view class="grid-item" v-for="item in classify" :key="id"
						@click="sheep.$router.go(`/pages/dossier/list?id=${item.id}&name=${item.name}`)">
						<view class="grid-item-icon" style="background: linear-gradient(178deg, #23594B  0%, #23594B  100%);">
							<text class="iconfont icon-a-ziyuan58"></text>
						</view>
						<view class="grid-item-label">
							{{getLangValue(item.name)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>

</template>

<script setup>
	import {
		computed,
		ref,
		reactive,
		watch,
		watchEffect
	} from 'vue'
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import sheep from '@/sheep'
	import {
		isEmpty,
		isArray,
		cloneDeep,
		concat,
		isNumber
	} from 'lodash-es'
	import useLang from '@/sheep/hooks/useLang.js'
	const { getLangValue } = useLang()
	const loading = ref(false)
	const classify = ref([])
	const getClassify = async () => {
		const res = await sheep.$api.dossier.classify()
		classify.value = res.data?.list || []
	}

	const init = async () => {
		await getClassify({
			page: 1,
			limit: 999999,
		})
	}
	onShow(async () => {

	})
	onLoad(async () => {
		await init()
	})
	// 隐藏原生tabBar
	uni.hideTabBar()

	// 上拉加载更多
	onReachBottom(() => {})

	// 下拉刷新
	onPullDownRefresh(async () => {
		try {
			await init()
		} finally {
			uni.stopPullDownRefresh()
			loading.value = false
		}
	})
</script>

<style scoped lang="scss">
	.index-wrap {
		padding: 35rpx 25rpx;
	}

	.card {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		width: 700rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			padding-left: 30rpx;
			padding-top: 30rpx;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			margin-top: 30rpx;

			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 5rpx;
				padding-bottom: 35rpx;
				padding-left: 2rpx;
				padding-right: 2rpx;

				.grid-item-icon {
					width: 88rpx;
					height: 88rpx;
					color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.iconfont {
						font-size: 45rpx;
					}
				}

				.grid-item-label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					margin-top: 10rpx;
				}
			}
		}

		.grid-item:active {
			opacity: 0.5;
		}
	}
</style>